<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-3.4.1.min.js"></script>
    <script>
        //$("")   //工厂函数 $函数名称 后面传递的是一个参数
        // $("#id")    //id选择器
        // $(".class") //类选择器
        // $("element")    //标记选择器 根据给定的元素名匹配所有元素
        // $("element:position")   //位置选择器 匹配符合标签中相应元素的位置
        // $("element[attribute]") //属性选择器 匹配包含给定属性的元素
        // $("ancestor descendant") //后代选择器 匹配给定的祖先元素的所有后代元素
        // $("parent>child")   //子代选择器 匹配所有指定“parent”元素中指定“child”的直接子元素

        
    </script>
    <script>
        // $(function(){
        //     //一定会在页面加载之后运行
        // });
        // $(document).ready(function(){

        // });
    </script>
    <style>
        div{
            width: 100px;
            height: 90px;
            float: left;
            padding: 5px;
            margin: 5px;
            background-color: #eeeeee;
        }
    </style>
</head>
<body>
    <!-- <div id="t1">
        <p>id="t1"</p>
        <p>选中</p>
    </div>
    <div id="t2">
        <p>id="t2"</p>
        <p>选中</p>
    </div>
    <div id="t3">
        <p>id="t3"</p>
        <p>选中</p>
    </div> -->

    <!-- <p class="c1">钢铁直男</p>
    <p class="c1" id="p2">心机男孩</p>
    <p class="c2" id="p3">假笑男孩</p> -->

    <!-- <h2>属性选择器</h2>
    <h3>[属性名]、[属性名='值']、[属性名!='值']</h3>
    <div class="div" name="p1">
        <a>[属性名='值']</a>
    </div>
    <div class="div" name="p2">
        <a>[属性名!='值']</a>
    </div>
    <div class="div" name="p3">
        <a>[属性名!='值']</a>
    </div>
    <div class="div">
        <a>没有name属性的</a>
    </div> -->

    <!-- <h2>位置选择器</h2>
    <h3>$("seclector:first")、$("seclector:last")、$("seclector:odd")、$("seclector:even")</h3>
    <div class="div">
        <p>第一个</p>
        <p>偶数</p>
    </div>
    <div class="div">
        <p>奇数</p>
    </div>
    <div class="div">
        <p>偶数</p>
    </div>
    <div class="div">
        <p>奇数</p>
    </div>
    <div class="div">
        <p>偶数</p>
    </div>
    <div class="div">
        <p>奇数</p>
    </div> -->

    <!-- <ul id="test">
        <li>Li-1</li>
        <li>Li-2</li>
        <li>Li-3
            <ul>
                <li>Li-3-1</li>
                <li>Li-3-2</li>
                <li>Li-3-3</li>
            </ul>
        </li>
    </ul> -->

    <!-- <p class="c1">段落1</p>
    <p class="c1" id="p2">
        <a href="#" id="a1">段落2.1</a>
        <a href="#">段落2.2</a>
    </p>
    <p class="c2">段落3</p> -->

    <ul id="test">
        <li>段落1</li>
        <li>段落2</li>
        <li>段落3</li>
        <li>段落4</li>
        <li>段落5</li>
    </ul>
</body>
<script>
    // //JS
    // var div = document.getElementById("t1");
    // div.style.border = "3px solid red";
</script>
<script>
    // //JQuery
    //id选择器
    // $("#t2").css("border","3px solid green");

    //类选择器
    // $(".c1").css("border","3px solid red");
    // $(".c2").css("border","3px solid green");

    //标记选择器
    // $("p").css("border","3px solid red");

    //属性选择器
    // $("[属性名]")  //匹配所有具有指定属性的元素
    // $("[属性名='值']")  //匹配与值相等的元素
    // $("[属性名!='值']")  //匹配与值不相等的元素
    // $("[属性名^='值']")  //匹配以某个值开头的元素
    // $("[属性名$='值']")  //匹配以某个值结尾的元素
    // $("[属性名*='值']")  //匹配包含某个值的元素

    //查找所有div中，属性name=p1的div元素
    // $("div[name='p1']").css("border","3px solid red");

    // //查找所有div中，属性name!=p1的div元素
    // $("div[name!='p1']").css("border","3px solid blue");

    // //查找所有div中，有name属性的元素
    // $("div[name]").css("border","3px solid yellow");

    //位置选择器
    // $("seclector:first")    //匹配第一个元素
    // $("seclector:last")    //匹配最后一个元素
    // $("seclector:odd")      //匹配索引值为奇数的元素，从0开始奇数
    // $("seclector:even")      //匹配索引值为偶数数的元素，从0开始奇数
    // $("seclector:eq(n)")      //匹配索引值为n的元素
    // $("seclector:gt(n)")       //匹配索引值大于n的元素
    // $("seclector:lt(n)")       //匹配索引值小于n的元素

    // $(".div:first").css("color","red");
    // $(".div:last").css("color","blue");
    // $(".div:odd").css("color","pink");
    // $(".div:even").css("color","yellow");
    

    //后代选择器
    // $("选择器1 选择器2 .....")
    // $("#test li").css("border","2px solid red");

    //子代选择器
    // $("选择器1>选择器2>.....");
    // $("#test>li").css("border","2px solid red");

    // $("选择器").each(function(index){this})    //选择器对象的遍历
    // $("选择器").find() //找前面选择器匹配到的元素的子元素
    // $("选择器").not()  //在前面选择器匹配到的元素中 去除某个或某几个
    // $("选择器").add()  //在前面选择器中再追加节点

    // $(".c1").each(function(index){
    //     alert(this);
    // });

    // $(".c1").find("#a1").css("border","2px solid red");
    // $(".c1").not("#p2").css("border","2px solid blue");
    // $(".c1").add(".c2").css("border","2px solid green");

    $("#test li").each(function(index){
        this.title = "我是第"+(index+1)+"个";
    });
</script>
</html>